<div style="margin:10px">
    <div id="form_create" class="div_form" >
        <h1>Create new general configuration item:</h1>
        <a href="index.php?m=manage_configuration">Devices list</a> | Create new device
        <p id="status1" style="font-size: 18px; color: red;"></p>
        
        <form class="form" enctype="multipart/form-data" action="index.php?m=manage_configuration&a=edit&s=submit" method="POST">
            <table>
                <tr>
                    <td>Configuration name(*):</td>
                    <td><input type="text" name="config_name" class="input_form" value="<?=$row['configname']?>"/></td>
                    <td><i>Fill all the require (*)</i></td>
               
                </tr>
                <tr>
                    <td>Description: </td>
                    <td><input type="text" name="description" class="input_form" value="<?=$row['description']?>"/></td>
                    <td></td>
                
                </tr>

                <tr>
                    <td>For customer(*):</td>
                    <td>
                        <select name="device_customer" id="device_customer" class="select">
                            <option value="0">- Select -</option>
                            <?foreach($posts as $p):?>
                            <option value="<?=$p['idcustomers']?>" <?=$sl=(($p['idcustomers']==$row['idcustomer'])?'selected':'')?>><?=$p['namecustomer']?></option>
                            <?endforeach?>
                        </select>
                    </td>
                    <td>            
                        <div id="sending" style="margin-left: 20px;">
                        <img src="../images/loading.gif" id="loading">
                        </div>
                    </td>
                   
                </tr>
                <tr>
                    <td>For the device:</td>
                    <td>
                        <select name="device_list" id="device_list" class="select">
                            <option value="0">- Select -</option>
                        </select>
                    </td>
                    <td><i>Do not choose if create the general CIs</i></td>
                    
                </tr>
                
            </table>
            <br>
            <table>

                <tr>
                    Configuration Detail(*):
                    <td ><textarea name="detail" style="width:100%;height: 200px;"><?=$row['configdetail']?></textarea></td>

                </tr>
                
                <tr>
                    <td style="text-align:left;">
                        Upload files: 
                            <input type="file" name="file[]" multiple />
                            </br>

                        <div id="file_selected"></div>
                    </td>

                </tr>
                <tr>
                    <td><div class="div_form" >
                            <h1>Configurations files:</h1>
                            <?if($row['config_file']!=""):?>

                            <?$fromdb = unserialize(base64_decode($row['config_file']));?>

                            <?foreach ($fromdb as $f):?>
                            <p><a href="http://localhost:8080/servicedesk/configfile_upload/<?=$f?>"><?=$f?></a> <a href="#" style="color: #FF0000;">(Remove)</a></p>
                            <?endforeach?>
                            <?endif?>

                    </div>
                    </td>
                </tr>
            </table>            
           <p style="margin-left: 100px"><input type="submit" value="Save"  class="button"> <input type="button" value="Reset" onclick="reset()" class="button"/> <br/></p>

        </form>

    </div>
</div>

<script>
$(document).ready(function() {
    $('#sending').hide();
});  

$("#device_customer").change(function(){
    var c_id=$("#device_customer").val();
    //alert(c_id);
    Get_list_content(c_id);

});

function Get_list_content(c_id){
    $('#sending').show();
    $.ajax({
          url: '<?=WEBSITE_URL?>/ajax.php',
          data: { m: 'manage_configuration', a:'get_devices',c_id:c_id},
          dataType:'json',
          success: function(data) {
            if (!data.success) {
                $("#device_list").html('<option value="1">'+"There is no device"+'</option>');
               //alert(data.error);
               return false;
            }
            //Update info
            $('#sending').hide();
            var option='<option value="0">'+" Choose device "+'</option>';
            var data_count=data.content.length;
            //alert(data.content.length);
            //tinArray=data.content;
            if(data_count>=1){
                
                 for(var i=0;i<data_count;i++){
                    option+='<option value="'+data.content[i].iddevices+'"> ID:'+data.content[i].iddevices+'--'+data.content[i].namedevice+'</option>';               
                    }
                    $("#device_list").html(option);
            }else{
                $("#device_list").html('<option value="0">'+"There is no device"+'</option>');
            }

          } 
        });
        return false;
}; 

</script>

<style>
    table{
        width: 100%;
        margin: auto;
        
    }
td
{
padding:3px;

}
</style>